import React from 'react';
import { ReactDOM } from 'react-dom'
import {Table, Icon,Button,Popconfirm,message } from 'antd';
import {  Link} from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class myTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading:true,
            showEleImg:false,
            imgSrc:''
        }    
    }
    getList(){
        this.setState({loading:true});
        fetch(config.base+"certificate/list",{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const data = []
                if(rep.length==0){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.length; i++) {
                    if(rep[i].status === 'ISSUED'){
                       data.push({
                        key: rep[i].id,
                        coursepName: rep[i].coursepName,
                        studentName:rep[i].studentName,
                        file:config.base+'certificates/'+rep[i].file,
                        status:rep[i].status
                        }) 
                   }
                }

                this.setState({
                    tDate: data,
                    loading:false
                })
                }
            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        showImg (src) {
            this.setState({
                showEleImg:true,
                imgSrc:src
            })
        }
        onDonwload (url,index) {
          const userAgent=navigator.userAgent;
          const downLoad=document.querySelector('.downloadImg'+index);
          //判断是否IE或则Edge浏览器 
          if ((userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) || (userAgent.indexOf("Trident") > -1
          )) { 
            downLoad.href="#"; 
            
            var odown=document.getElementById("down"); 
            var oImg=document.createElement("img"); 
            oImg.src=url; 
            oImg.id="downImg";
            odown.appendChild(oImg); 
            var oPop = window.open(oImg.src,"","width=1, height=1, top=5000, left=5000");
            for(; oPop.document.readyState != "complete"; ) { 
              if (oPop.document.readyState == "complete")break; 
            } 
            oPop.document.execCommand("SaveAs"); 
            oPop.close();
          } else {
            //!IE 
            downLoad.href=url; 
            downLoad.download="证书";
          }
        }
        onPrint (url,index) {
          this.setState({imgSrc:url},function(){
            var el = document.getElementById('showImgBig');
            var iframe = document.createElement('IFRAME');
            var doc = null;
            iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
            document.body.appendChild(iframe);
            doc = iframe.contentWindow.document;
            doc.write('<div>' + el.innerHTML + '</div>');
            doc.close();
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
            if (navigator.userAgent.indexOf("MSIE") > 0)
            {
                 document.body.removeChild(iframe);
            }
          })
          
        }
        closeImg () {
            this.setState({ showEleImg:false})
        }
        componentDidMount () {
            this.getList();
        }
        render() {
            const { tDate, showEleImg, imgSrc }=this.state;
            const  columns = [{
                    title: '获证学员',
                    width: '20%',
                    dataIndex: 'studentName',
                    
                },{
                    title: '证书名称',
                    width: '20%',
                    dataIndex: 'coursepName',
                    
                },{
                    title: '预览',
                    width: '20%',
                    dataIndex: 'file',
                    render:(src, record, index)=>{
                      return (
                        <div className="eleLitleImg"><img id={'eleLitleImg'+index}  src={src} onClick={()=>{this.showImg(src)}} /></div>
                      )
                    }
                },{
                    title: '操作',
                    width: '30%',
                    dataIndex: 'operate',
                    render:(text, record, index)=> {
                        return (<div>
                            <a className={"downloadImg"+index} onClick={()=>{this.onDonwload(tDate[index].file,index)}} >下载证书</a>
                            &nbsp;&nbsp;
                            <Popconfirm title="确定打印?" onConfirm={ ()=> this.onPrint(tDate[index].file,index)} >
                            <Button type="danger" htmlType="button" >打印证书</Button>
                            </Popconfirm>
                            </div>)
                    }
                }];
            

            return (
                <div>
                {/*startprint1*/}
                <div id="showImgBig" className={showEleImg?"showEleImg active":"showEleImg"}>
                <Icon type="cross-circle-o" onClick={this.closeImg.bind(this)} />
                <img src={imgSrc}  alt ="证书图片"/>
                </div>
                {/*endprint1*/}
                <Table columns={columns} dataSource={tDate} bordered pagination={false} loading={this.state.loading} className="animated fadeInUp " />
                </div>
            )
        }
    }
